<template>
  <div class="layout">
    <div class="menu-list">
      <button v-for='(item, index) in 5' :key="index" @click="changeSelectClass(index)">选择菜单</button>
      <!-- //此组件可以根据children的深度自动增加子级菜单 -->
      <u-select @click="show = true" :default-value="defaultValue" mode="mutil-column-auto" v-model="show"
        :list="classList" value-name="id" @confirm="selectconfirm" safe-area-inset-bottom>
      </u-select>
      <!-- //mode是列数，single-column是单列,mutil-column-auto是多列根据数组深度扩充
      //其中value-name是自定义将id替换为原来的value这个值 -->
    </div>
  </div>
</template>
<script>
import { modelNavigateTo } from "./tpl";
export default {
  title: "五列菜单",
  props: ["res"],
  data() {
    return {
      modelNavigateTo,
      show: false,

      defaultValue: [1],//默认选中第二项，当点击确定按钮的时候设置默认选择菜单中的第几项
      classList: [
        {
          id: '1',
          label: 'first',
          children: [
            {
              id: '11',
            label: 'nice',
            }
          ],
        },
        {
          id: '2',
          label: 'second',
          children: [
            {
              id: '12',
            label: 'niceSecond'
            }
          ]
        },
        {
          id: '3',
          label: 'third',
          children: [
            {
              id: '13',
            label: 'niceThird'
            }
          ]
        }
      ],
    };
  },
  methods:{
    changeSelectClass(index) {
       console.log(index);
    },
    selectconfirm(e) {
       console.log(e);
    }
    

}
};
</script>
<style lang="scss" scoped>
@import "./tpl.scss";

.menu-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;

  >.menu-item {
    text-align: center;
    width: 20%;
    // flex: 1;
    margin: 20rpx 0;
  }
}

.menu-img {
  display: flex;
  margin: 0 auto;
  width: 88rpx;
  height: 88rpx;
}

.menu-title {
  font-size: 24rpx;
}
</style>